import styled from 'styled-components'
import { thomeColor } from 'assets/color'

export const HomeStyle = styled.div`
   flex:1;
   overflow:hidden;
   width:100%
 
      
  }
   
`

export const HeaderStyle = styled.div`
       

    i{
        color:#ccc
    }
        header{
            height: 0.45rem;
            width: 100%;
            background: #fff;
            overflow: hidden;
            display: flex;
            justify-content:center;
            align-items: center;
            a{
                height:0.31rem;
                width:80%;
                font-size: 0.14rem;
                text-align: center;
                line-height:0.31rem;
                border-radius:0.2rem
                display:block;
                color: #999;
                background: #F5F5F5;
                box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.05) inset;
                margin-right:0.15rem
                .fa-search{
                    font-size:0.15rem
                }
                span{
                    margin-left:.1rem
                }
            } 
            div{
                height:0.31rem;
                line-height:0.38rem
            }
            .fa-align-left{
                font-size:.22rem;
                color:#ccc
            }

`

export  const SearchStyle = styled.div`


    .mask{
        position: fixed;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 21;
        
        }
    .search_mask{
    position: fixed;
    top: 0px;
    right:0px
    z-index: 22;
    width: 84.375%;
    height: 100%;
    background: #fff;
    -webkit-transition: .2s -webkit-transform ease-in-out .2s;
   
        .serach_head{
            height:0.45rem;
            display: flex;
            justify-content:center;
            align-items: center;
            border-bottom: solid 1px #f5f5f5
            a{
                height:0.31rem;
                width:80%;
                font-size: 0.14rem;
                text-align: center;
                line-height:0.31rem;
                border-radius:0.2rem
                display:block;
                color: #999;
                background: #F5F5F5;
                box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.05) inset;
                margin-right:0.15rem
                .fa-search{
                    font-size:0.15rem
                }
                span{
                    margin-left:.1rem
                }
            }
        .back{
            color:#999;
            font-size:0.14rem

        }
    }
   
 }

 .lists{
        padding: 0px;
        color: #666;
        margin: 0px;
        overflow-y: scroll;
        height: 80%
        .active{
            color: ${ thomeColor };
            border-bottom: none;
        }
        &>li{
            border-bottom: solid 1px #eee;
            line-height: 0.4rem;
            font-size:0.14rem;
            padding-left: 0.2rem;
            position: relative;
            
            .fa-angle-down{
                position: absolute;
                right: 0.15rem;
                top: 0.15rem
            }
            .show{
                display:block
            }
            .hide{
                display: none;
            }
            .list_sub{
                border-top: solid 1px #eee;
                overflow: hidden;
                margin-left: -0.2rem;
                color: #666;
                li{
                    background: #f5f5f5;
                    padding-left: 0.2rem;
                    margin-top: 1px;
                }
                
            }
        }
    }
            
        
}  
`

export const HomeGoTopStyle = styled.div`
        height:.4rem;
        width:.4rem;
        text-align:center;
        line-height:.4rem;
        position: fixed;
        bottom:.65rem;
        right:.15rem;
        color:#666;
        z-index:1000;
        border:1px solid #666
        border-radius: 50%;
        a{
            width:100%;
            height:100%;
        }
        

`